<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎登陆注册页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style> 
     html{
        background: url(images/11.png) no-repeat;
        background-size: 100% 100%;
        min-width: 1250px;
        }
    form{
        margin: 50px 540px;
    }
    </style>
</head>
<body>
        <div class="h1 text-center page-header">
                <a style="text-decoration: none" href="#" title="京东">
                    <h1> <img src="images/3.png" alt="">
                    <small>欢迎注册</small></h1>
                    </a>         
            </div>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="email" class="form-control" id="usename" placeholder="请输入用户名"><span></span>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="password" placeholder="请输入密码"><span></span>
        </div>
        <div class="form-group">
                <label for="exampleInputPassword1">确认密码</label>
                <input type="password" class="form-control" id="repassword" placeholder="请再次输入密码"><span></span>
            </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" id="check"> 请勾选同意
            </label>
        </div>
        <button type="button" class="btn btn-default">注册</button>
    </form>
</body>
<script src="js/promiseAjax.js"></script>
<script>
     var zz=document.querySelector("#usename");
     var xx=document.querySelector("#password");
     var bb=document.querySelector("#repassword")
zz.onblur=function(){
    var reg=/^[a-zA-Z][\da-zA-Z]{5,11}$/
    if(reg.test(zz.value)){
        this.nextElementSibling.innerHTML="用户名格式正确";
        this.nextElementSibling.style.color="green";
        this.nextElementSibling.style.fontSize="12px";
}else{
        this.nextElementSibling.innerHTML="用户名开头必须是字母 后面则由数字或字母组成 6-12位";
        this.nextElementSibling.style.color="red";
        this.nextElementSibling.style.fontSize="12px";
}
}
bb.onblur=function(){
if(xx.value==bb.value&&bb.value!=""){
    this.nextElementSibling.innerHTML="正确";
    this.nextElementSibling.style.color="green";
    this.nextElementSibling.style.fontSize="12px";
    b=bb.value;
}else{
    this.nextElementSibling.innerHTML="两次密码不一致";
    this.nextElementSibling.style.color="red";
    this.nextElementSibling.style.fontSize="12px";
}
}
xx.onblur=function(){
var reg = /^[_0-9a-z]{6,16}$/;
if(reg.test(xx.value)){
    this.nextElementSibling.innerHTML="密码格式正确";
    this.nextElementSibling.style.color="green";
    this.nextElementSibling.style.fontSize="12px";
}else{
    this.nextElementSibling.innerHTML="密码必须是6-16位的 数字小写字母或下划线";
    this.nextElementSibling.style.color="red";
    this.nextElementSibling.style.fontSize="12px";
}
}
    var button=document.querySelector("button[type='button']");
    button.addEventListener("click",reg);
    function reg(){
        var check=document.querySelector("#check");
        if(!check.checked){
            alert("请勾选并同意");
            return;
        }
        var usename=document.querySelector("#usename").value.trim();
        var password=document.querySelector("#password").value.trim();
        pAjax({
            url:"php/reg.php",
            type:"post",
            data:{
                usename:usename,
                password:password,
            },
        }).then(function(res){
            if(res.status==200){
                alert(res.msg);
                location.href='login.html';
            }else{
                alert(res.msg);
                return;
            }
        })
    }
</script>
</html>